<template>
  <div>
    <h1>当前总和为: {{sum}}</h1>
    <h1>当前总和扩大10倍为: {{bigSum}}</h1>
    <h3>当前地址为: {{sheng}}省{{shi}}市</h3>
    <h3>下面组件的总人数为: {{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="odd">当前求和为奇数再加</button>
    <button @click="slow">等一等再加</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Count-vuex",
  data(){
    return{
      n:1,
    }
  },
  computed:{
    sum(){
      return  this.$store.state.sum
    },
    sheng(){
      return  this.$store.state.sheng
    },
    shi(){
      return  this.$store.state.shi
    },
    bigSum(){
      return  this.$store.getters.bigSum
    },
    personList(){
      return  this.$store.state.personList
    }

  },
  methods:{
    add(){
      this.$store.commit('ADD',this.n)
    },
    sub(){
      this.$store.commit('SUB',this.n)
    },
    odd(){
      this.$store.dispatch('addOdd',this.n)
    },
    slow(){
      this.$store.dispatch('addWait',this.n)
    }
  }
}
</script>

<style scoped>

</style>